<template>
  <!-- 软件岗位薪资饼图 -->
  <div>
    <form class="form" action="#">
      <label for="fengqu">选择工作地区</label>
      <select v-model="params.fengqu" name="languages" id="fengqu">
        <option v-for="item in selectData1" :key="item" :value="item">
          {{ item }}
        </option>
      </select>
      <label for="hangye">选择行业</label>
      <select v-model="params.hangye" name="languages" id="hangye">
        <option v-for="item in selectData2" :key="item" :value="item">
          {{ item }}
        </option>
      </select>
      <label for="xueli">选择学历</label>
      <select v-model="params.xueli" name="languages" id="xueli">
        <option v-for="item in selectData3" :key="item" :value="item">
          {{ item }}
        </option>
      </select>
      <button type="button" @click="search" class="submit">查询</button>
    </form>
    <div class="yuce">预测岗位薪资：<span>{{pred_salary}}元</span></div>
    <table class="barChart">
      <thead>
        <tr class="head">
          <th>序号</th>
          <th>岗位名称</th>
          <th>所属行业</th>
          <th>公司</th>
          <th>地点</th>
          <th>薪资</th>
          <th>工作经验要求</th>
          <th>学历要求</th>
          <th>人数</th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-show="eData.length > 0"
          class="list"
          v-for="(item, index) in eData"
          :key="index"
        >
          <td style="text-align: center">
            {{ index + 1 }}
          </td>
          <td>{{ item[0] }}</td>
          <td>{{ item[1] }}</td>
          <td>{{ item[2] }}</td>
          <td>{{ item[3] }}</td>
          <td>{{ item[4] }}</td>
          <td>{{ item[5] }}</td>
          <td>{{ item[6] }}</td>
          <td>{{ item[7] }}</td>
          <!-- <td>{{ item.salary }}</td> -->
        </tr>
        <div class="emptyc" v-if="eData.length === 0">内容为空</div>
      </tbody>
    </table>
  </div>
</template>

<script>
import { yuceAnalysis, xialaAnalysis } from "@/api/page2Api";
export default {
  name: "",
  data() {
    return {
      data: [],
      eData: [],
      selectData1: [],
      selectData2: [],
      selectData3: [],
      pred_salary: 0 ,
      params: {
        fengqu: "华南",
        hangye: "学术/科研",
        xueli: "博士",
      },
    };
  },
  props: {
    // type: Number,
    // eData: Array
  },
  methods: {
    setChart() {},
    search() {
      console.log(this.params);
      yuceAnalysis(this.params).then((res) => {
        this.eData = res.recommend_jobs;
        this.pred_salary = res.pred_salary
      });
    },
  },
  mounted() {
    xialaAnalysis().then((res) => {
      this.selectData1 = res.fengqu;
      this.selectData2 = res.hangye;
      this.selectData3 = res.xueli;
      this.search();
    });
    // yuceAnalysis().then((res1) => {
    //   let res = res1.data;
    //   this.data = res[this.type];
    // });
  },
};
</script>

<style lang="less" scoped>
.form {
  margin-top: 10px;
  select {
    width: 150px;
    height: 30px;
    border-radius: 8px;
  }
  label {
    color: #fff;
    margin-left: 10px;
    margin-right: 10px;
  }
  .submit {
    width: 65px;
    line-height: 30px;
    border-radius: 8px;
    background: #6eddf1;
    font-weight: 600;
    font-size: 16px;
    margin-left: 20px;
  }
}
.yuce {
  margin-left: 10px;
  font-size: 14px;
  color: #ccc;
  line-height: 30px;
  span {
    color: red;
  }
}
table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;

  thead {
    tr {
      color: #6eddf1;
      th {
        width: 20px;
      }
    }
  }
  tbody {
    position: relative;
    .emptyc {
      color: #fff;
      line-height: 50px;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 100%;
      font-size: 20px;
      font-weight: blod;
      text-align: center;
    }
    display: block;
    height: 650px;
    overflow-y: scroll;
    tr {
      background: #a09e9e;
      height: 40px;
      &:nth-child(even) {
        background: #ccc;
      }
      td {
        text-align: center;
        color: #000;
      }
    }
  }
}
table thead,
tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
::-webkit-scrollbar {
  width: 0 !important;
}
.element {
  -ms-overflow-style: none;
}
</style>